<template>
  <massif-layout left-width="256px">
    <template #left>
      <div class="massifIndex">
        <div class="searchBox">
          <div class="title">
            <bar-title title="农事记录" style="background: none;" :tips="`（${total}）`" />
          </div>
          <div class="scbtn">
            <hover-search ref="hvScRef" :showPop="showPop">
              <div class="tscBox">
                <div class="sfInputItem">
                  <div class="scName"><img src="/src/assets/jh.png" alt="">方案</div>
                  <div class="valbox">
                    <plant-header-select v-model="searchInfo.plantingPlanId"  @focus="onFocus(false)" @change="onFocus(true)" 
                    placeholder="选择方案" :params="{ statusList: ['ZXZ', 'YWC'] }"
                      width="100%" class-name="newSelectStyle" />
                  </div>
                </div>
                <div class="sfInputItem">
                  <div class="scName"><img src="/src/assets/rq.png" alt="">日期</div>
                  <div class="valbox">
                    <my-date-picker v-model="time"  @focus="onFocus(false)" @change="onFocus(true)" />
                  </div>
                </div>
                <div class="sfInputItem">
                  <div class="scName"><img src="/src/assets/zsqk.png" alt="">作业</div>
                  <div class="valbox">
                      <crop-select 
                        @focus="onFocus(false)" 
                        @change="onFocus(true)" 
                        v-model="searchInfo.stageTaskId"  
                        :param1="searchInfo.plantingPlanId"
                        class="newSelectStyle"
                        width="100%"
                        code="TANC_PLANTING_TASK"
                        placeholder="选择作业"
                      /> 
                  </div>
                </div>
                <div class="sfInputItem">
                  <div class="scName"><img src="/src/assets/fzr.png" alt="">负责人</div>
                  <div class="valbox">
                    <user-select v-model="searchInfo.createId"  @focus="onFocus(false)" @change="onFocus(true)" placeholder="选择负责人" class="newSelectStyle" />
                  </div>
                </div>
                <div style="display: flex;justify-content: end;padding:20px 0 0 0;">
                  <el-button class="newBtnStyle" icon="circleClose" @click="closeSearchPop">取消</el-button>
                  <el-button class="newBtnStyle" type="primary" icon="search" @click="search">查询</el-button>
                </div>
              </div>
            </hover-search>
          </div>
        </div>
        <div class="listBox">
          <task-min-list :list="records || []" @itemClick="lookDetail" />
          <div v-if="records && records.length == 0" style="text-align: center;padding: 20px 0;color: #999;">暂无数据
          </div>
        </div>
        <div class="bottom-page">
          <my-pagination :total="total" :page="page" :finish="(page * limit) >= total" :limit="limit" @goPage="toPage" />
        </div>
      </div>
    </template>
    <div style="width: 100%; height: 100%; position: relative;">
      <landMap :selectList="selectLand" :locationObject="locationObject" />
    </div>
    <detail v-if="rightBlockFlag" :details="details" @close="rightBlockFlag = false" @on-click="locationLand" />
  </massif-layout>
</template>

<script setup>
// 这里的name是为了做页面缓存，其值要跟路由里面的name值一样

import { nextTick, ref, watch, onActivated, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message } from '@/utils/element'
import massifLayout from '../components/layout.vue'
import myPagination from '@/components/custom/myPagination.vue'
import detail from './components/detail.vue'
import barTitle from '../task/components/barTitle.vue'
import taskMinList from '../components/taskMinList.vue'
import hoverSearch from '../components/hoverSearch.vue'
import plantHeaderSelect from '@/components/custom/plantHeaderSelect.vue'
import userSelect from '@/components/custom/userSelect.vue'
import myDatePicker from '@/components/custom/myDatePicker.vue'
import {getFarmRecordList, getRecordDetail,getRecordLandList} from '@/api/plant'
import { useUserStore } from '@/pinia/modules/user'
import cropSelect from '@/components/custom/cropSelect.vue'
import landMap from './components/land-map.vue'

const router = useRouter()
const userStore = useUserStore()

const rightBlockFlag = ref(false)
const mapRef = ref(null)
const searchInfo = ref({})
const page = ref(1)
const limit = ref(10)
const total = ref(0)
const farmId = ref(null) // 选择的农场id
const farmRef = ref(null)
const records = ref([])
const time = ref('')
const details = ref({})
const listItem = ref({})
const hvScRef = ref(null)
const showPop = ref(true)
const selectLand = ref([])
const locationObject = ref({})
const q_plantingPlanTaskRecordId = ref('')
const q_companyId = ref('')
const q_farmId = ref('')

onMounted(async () => {
  searchInfo.value.farmId = userStore.userInfo.farmId
  searchInfo.value.companyId = userStore.userInfo.companyId

  const { currentRoute } = router
  q_plantingPlanTaskRecordId.value = currentRoute.value.query.plantingPlanTaskRecordId
  if (q_plantingPlanTaskRecordId.value) { // 农事任务-任务详情过来的
    q_companyId.value = parseInt(currentRoute.value.query.companyId)
    q_farmId.value = parseInt(currentRoute.value.query.farmId)
    searchInfo.value.farmId = q_farmId.value
    searchInfo.value.companyId = q_companyId.value

    const res = await getFarmRecordList({
      page: 1,
      limit: 1000,
      farmId: q_farmId.value,
      farmingType: 1,
      queryEntry: 1,
      companyId: q_companyId.value,
    })
    // 查找记录所在的页数
    const curRecordIndex = res.data.findIndex(item => item.plantingPlanTaskRecordId == q_plantingPlanTaskRecordId.value)
    const recordInPage = Math.ceil((curRecordIndex + 1) / limit.value) // 所在页数
    if (recordInPage > 1) {
      page.value = recordInPage
    }
    await get_farm_list()
    lookDetail({
      plantingPlanTaskRecordId: q_plantingPlanTaskRecordId.value,
      farmId: q_farmId.value
    })
  } else {
    get_farm_list()
  }
  await nextTick()
})

const get_farm_list = async () => {
  get_farm_record_list()
}

// 农事记录列表
const get_farm_record_list = async () => {
  rightBlockFlag.value = false
  if (time.value) {
    searchInfo.value.createTimeStart = time.value[0] + ' 00:00:00'
    searchInfo.value.createTimeEnd = time.value[1] + ' 00:00:00'
  } else {
    delete searchInfo.value.createTimeStart
    delete searchInfo.value.createTimeEnd
  }
  const res = await getFarmRecordList({
    page: page.value,
    limit: limit.value,
    // farmId:farmId.value || null,
    farmingType: 1,
    queryEntry: 1, // 种植系统固定为1
    ...searchInfo.value,

  })
  if(res.success){
    records.value = res.data
    total.value = res.total
  }
}

const onFocus =(type)=>{
  showPop.value = type
}

const search = () => {
  page.value = 1
  closeSearchPop()
  get_farm_record_list()
}

const toPage = (pageNum) => {
  page.value = pageNum
  get_farm_record_list()
}

const lookDetail = async (item) => {
  listItem.value = item
  farmId.value = item.farmId
  const res = await getRecordDetail(item.plantingPlanTaskRecordId)
  const landRes = await getRecordLandList({plantingPlanTaskRecordId:item.plantingPlanTaskRecordId,page:1,limit:10000})
  if (res.success) {
      rightBlockFlag.value = true  
      details.value = res.data  
      selectLand.value =JSON.parse( res.data.farmLandJstr||'{}')?.taskLandIdRspList||[]
      if (landRes.success) {
        details.value.landRecordRspList = landRes.data ||[]
      }
  }
}
const closeSearchPop = () => {
  hvScRef.value.close()
}


const locationLand = (item) => {
  locationObject.value = item
}



// #endregion
</script>

<style lang="scss" scoped>
.massifIndex {
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  height: 100%;
  padding: 0;

  //overflow: hidden;
  .searchBox {
    display: flex;
    padding: 0 0 0 10px;
    border-bottom: 1px solid #F4F4F4;

    .title {
      flex: 1;
    }

    .scbtn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 100%;
    }
  }

  .listBox {
    box-sizing: border-box;
    //flex: 1;
    height: calc(100vh - 158px);
    flex-shrink: 0;
    width: 100%;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
  }

  .bottom-page {
    box-sizing: border-box;
    flex-shrink: 0;
    height: 30px;
    padding: 0 15px;
  }
}

.rdList {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;

  li {
    display: flex;
    box-sizing: border-box;
    min-height: 80px;
    line-height: 20px;
    padding: 8px;
    background-color: #f8f7f7;
    cursor: pointer;

    &.selected {
      background-color: rgb(72, 178, 122, 0.2);
    }

    &+li {
      margin-top: 10px;
    }

    .tBox {
      flex: 1;

      p {
        font-size: 12px;
      }
    }

    .imgBox {
      width: 64px;
      height: 64px;
      // background-color: #cdcdcd;
      background-size: cover;
      background-position: center center;
      background-image: url(../../assets/default.png);
    }
  }
}

.tscBox {
  width: 390px;
  padding: 20px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  .sfInputItem {
    display: flex;
    height: 38px;
    align-items: center;
    &+.sfInputItem {
      margin-top: 10px;
    }
    .valbox {
      flex: 1;
    }
    .scName {
      display: flex;
      align-items: center;
      width: 110px;
      font-size: 16px;
      color: #333333;
      img {
        display: block;
        width: 20px;
        margin: 0 6px 0 0;
      }
    }
  }
}
</style>
<style lang="scss">
.datebox {
  .el-date-editor {
    width: 100%;
  }
}

.el-select {
  &.newSelectStyle {
    .el-input__inner {
      height: 38px !important;
      line-height: 38;
      padding-right: 0;
      overflow: hidden;
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
    }

    .el-input__suffix {
      padding: 0 8px;
      background: #F9F9F9;
      height: 36px;
      top: 1px;
      right: 1px;

      .el-icon {
        color: #04AE70;
        font-weight: bold;
      }
    }

    .el-input__icon {
      line-height: 38;
      height: 36px !important;
    }

    .el-input.is-focus .el-input__inner,
    .el-input__inner:focus {
      border-color: rgba(0, 0, 0, 0.15) !important;
    }
  }
}

.el-button {
  &.newBtnStyle {
    height: 38px;
  }
}
</style>

